<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
      
        .loading {
          
          width: 300px;
          height: 300px;
          margin: auto;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgb(123, 113, 243);
        }
      
        .load .loaderContant {
          
          /* background-color: rgb(185, 171, 11); */
          width:40px;
          height: 40px;
          border-radius: 999px;
         
          /* box-shadow: 0 -40px 0 -10px white, 0 -40px 0 -11px white, 0 -40px 0 -12px white, 0 -40px 0 -13px white, 0 -40px 0 -14px white;  
           animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
          animation:round 1.7s infinite ease, load 1.7s infinite ease;
         
        }      
        @keyframes load {
          0% {
            box-shadow: 0 -40px 0 -12px white, 0 -40px 0 -13px white, 0 -40px 0 -14px white, 0 -40px 0 -15px white, 0 -40px 0 -16px white;  
          }
      
          5%,
          95% {
            box-shadow: 0 -40px 0 -12px white, 0 -40px 0 -13px white, 0 -40px 0 -14px white, 0 -40px 0 -15px white, 0 -40px 0 -16px white;  
        }
      
          10%,
          60% {
            box-shadow: 0 -40px 0 -12px white, -4px -39px 0 -13px white, -9px -38px 0 -14px white, -13px -37px 0 -15px white, -15px -36px 0 -16px white;
          }
      
          20% {
            box-shadow: 0 -40px 0 -12px white, -17px -38px 0 -13px white, -25px -31px 0 -14px white, -33px -24px 0 -15px white, -37px -17px 0 -16px white;
          }
      
          40% {
            box-shadow: 0 -40px 0 -12px white, -19px -37px 0 -13px white, -32px -26px 0 -14px white, -38px -15px 0 -15px white, -41px -4px 0 -16px white;
          }
      
          100% {
            box-shadow: 0 -40px 0 -12px white, 0 -40px 0 -13px white, 0 -40px 0 -14px white, 0 -40px 0 -15px white, 0 -40px 0 -16px white;
          }
        }
      
        @keyframes round {
          0% {
            transform: rotate(0deg);/* 开始旋转 div 元素 */
          }
      
          100% {
            transform: rotate(360deg);/* 结束旋转 div 元素 */
          }
        }
      </style>
      
</head>
<body>
    <div class="loading load">
        <div class="loaderContant"></div>
    </div>
</body>
</html>